<template>
	<view :class="['drawer-content',`theme-${themeType}`]">
		<!-- 留出状态栏高度 -->
		<view class="u-status-bar"></view>
		<view class="user-info">
			<u-image border-radius="50%" width="30px" height="30px" src="/static/img/logo.png"></u-image>
			<view class="user-info__name">
				<text>廖子默</text>
				<text class="iconfont icon-youbian"></text>
			</view>
			<view class="qrcode animate__animated" hover-class="animate__fadeIn"><u-icon name="scan" size="38"></u-icon></view>
		</view>
		<u-cell-group :title-style="cellTitleSty" class="drawer-item-warp">
			<u-cell-item class="custom-item" :border-top="false" :arrow="false" title="消息中心">
				<template slot="icon">
					<text class="iconfont icon-xinfeng iconSize" style="padding-right: 10px;"></text>
				</template>
				<template slot="right-icon">
					<u-badge type="error" count="7" :absolute="false"></u-badge>
					<view class="iconfont icon-youbian iconSize"></view>
				</template>
			</u-cell-item>
			<u-cell-item class="custom-item" :arrow="false" title="云贝中心">
				<template slot="icon">
					<text class="iconfont icon-yunziyuan iconSize" style="padding-right: 10px;"></text>
				</template>
				<template slot="right-icon">
					<u-tag text="签到" type="error" color="red" size="mini" shape="circle" mode="plain" />
					<view class="iconfont icon-youbian iconSize"></view>
				</template>
			</u-cell-item>
			<u-cell-item class="custom-item" :arrow="false" title="创作者中心">
				<template slot="icon">
					<text class="iconfont icon-dengpao iconSize" style="padding-right: 10px;"></text>
				</template>
				<template slot="right-icon">
					<view class="iconfont icon-youbian iconSize"></view>
				</template>
			</u-cell-item>
		</u-cell-group>
		<u-cell-group :title-style="cellTitleSty" class="drawer-item-warp" title="音乐服务">
			<u-cell-item class="custom-item" :border-top="false" :arrow="false" title="演出">
				<template slot="icon">
					<text class="iconfont icon-menpiao iconSize" style="padding-right: 10px;"></text>
				</template>
				<template slot="right-icon">
					<view class="iconfont icon-youbian iconSize"></view>
				</template>
			</u-cell-item>
			<u-cell-item class="custom-item" :arrow="false" title="商城">
				<template slot="icon">
					<text class="iconfont icon-a-shangcheng iconSize" style="padding-right: 10px;"></text>
				</template>
				<template slot="right-icon">
					<text>抽奖</text>
					<view class="iconfont icon-youbian iconSize"></view>
				</template>
			</u-cell-item>
			<u-cell-item class="custom-item" :arrow="false" title="口袋彩铃">
				<template slot="icon">
					<text class="iconfont icon-cailing iconSize" style="padding-right: 10px;"></text>
				</template>
				<template slot="right-icon">
					<view class="iconfont icon-youbian iconSize"></view>
				</template>
			</u-cell-item>
			<u-cell-item class="custom-item" :arrow="false" title="游戏专区">
				<template slot="icon">
					<text class="iconfont icon-tab_game_selected_fuzhi iconSize" style="padding-right: 10px;"></text>
				</template>
				<template slot="right-icon">
					<view class="iconfont icon-youbian iconSize"></view>
				</template>
			</u-cell-item>
		</u-cell-group>
		<u-cell-group :title-style="cellTitleSty" class="drawer-item-warp" title="其他">
			<u-cell-item class="custom-item" :border-top="false" :arrow="false" title="设置">
				<template slot="icon">
					<text class="iconfont icon-shezhi iconSize" style="padding-right: 10px;"></text>
				</template>
				<template slot="right-icon">
					<view class="iconfont icon-youbian iconSize"></view>
				</template>
			</u-cell-item>
			<u-cell-item class="custom-item" :arrow="false" title="夜间模式">
				<template slot="icon">
					<text class="iconfont icon-yejianmoshi iconSize" style="padding-right: 10px;"></text>
				</template>
				<template slot="right-icon">
					<u-switch v-model="checked" @change="toggleThem" active-color="red"></u-switch>
					<view class="iconfont icon-youbian iconSize"></view>
				</template>
			</u-cell-item>
			<u-cell-item class="custom-item" :arrow="false" title="定时关闭">
				<template slot="icon">
					<text class="iconfont icon-dingshi iconSize" style="padding-right: 10px;"></text>
				</template>
				<template slot="right-icon">
					<view class="iconfont icon-youbian iconSize"></view>
				</template>
			</u-cell-item>
			<u-cell-item class="custom-item" :arrow="false" title="个性装扮">
				<template slot="icon">
					<text class="iconfont icon-gexingzhuangban iconSize" style="padding-right: 10px;"></text>
				</template>
				<template slot="right-icon">
					<view class="iconfont icon-youbian iconSize"></view>
				</template>
			</u-cell-item>
			<u-cell-item class="custom-item" :arrow="false" title="音乐黑名单">
				<template slot="icon">
					<text class="iconfont icon-jinzhi iconSize" style="padding-right: 10px;"></text>
				</template>
				<template slot="right-icon">
					<view class="iconfont icon-youbian iconSize"></view>
				</template>
			</u-cell-item>
			<u-cell-item class="custom-item" :arrow="false" title="青少年模式">
				<template slot="icon">
					<text class="iconfont icon-pengyou iconSize" style="padding-right: 10px;"></text>
				</template>
				<template slot="right-icon">
					<text>未开启</text>
					<view class="iconfont icon-youbian iconSize"></view>
				</template>
			</u-cell-item>
			<u-cell-item class="custom-item" :arrow="false" title="音乐闹钟">
				<template slot="icon">
					<text class="iconfont icon-naozhong iconSize" style="padding-right: 10px;"></text>
				</template>
				<template slot="right-icon">
					<text>未开启</text>
					<view class="iconfont icon-youbian iconSize"></view>
				</template>
			</u-cell-item>
		</u-cell-group>
		<u-cell-group :title-style="cellTitleSty" class="drawer-item-warp">
			<u-cell-item class="custom-item" :border-top="false" :arrow="false" title="分享网易云音乐">
				<template slot="icon">
					<text class="iconfont icon-fenxiang iconSize" style="padding-right: 10px;"></text>
				</template>
				<template slot="right-icon">
					<view class="iconfont icon-youbian iconSize"></view>
				</template>
			</u-cell-item>
			<u-cell-item class="custom-item" :arrow="false" title="关于">
				<template slot="icon">
					<text class="iconfont icon-guanyu iconSize" style="padding-right: 10px;"></text>
				</template>
				<template slot="right-icon">
					<view class="iconfont icon-youbian iconSize"></view>
				</template>
			</u-cell-item>
		</u-cell-group>
	</view>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
	name: 'drawer-content',
	computed: {
		cellTitleSty() {
			return { 'font-size': '12px', padding: '10px 13px 10px 13px' };
		}
	},
	data() {
		return {
			checked:false
		};
	},
	methods:{
		toggleThem(status){
			if(status){
				this.SET_THEME('dark')
				uni.setTabBarStyle({
					backgroundColor:'rgb(24,21,14)'
				});
			}else{
				this.SET_THEME('light');
				uni.setTabBarStyle({
					backgroundColor:'#FFFFFF'
				});
			}
		}
	},
	created() {
		switch(this.themeType){
			case 'light':
			this.checked = false;
			break;
			case 'dark':
			this.checked = true;
			break;
		}
	}
};
</script>